<html>
    <head>
        <title>Google Map Demo</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />       
        <link rel="stylesheet" href="${pageContext.request.contextPath}/css/sm.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" type="text/css" media="screen" />
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBrxXoFPd2hFUvBLPDepL6RnUm4ItKMV-o&sensor=false"></script>
           

        <style>


            #map_canvas
            {
                width: 739px;
                height: 500px;
                margin: 10px auto;
            }

            div#latlng-control
            {
                background: #ffc;
                border: 1px solid #676767;
                padding: 2px 4px;
                position: absolute;
            }

        </style>
        <script type="text/javascript">
            
            function createInfo(title, content) {
                return '<div id="popup"><h1 class="popup-title">' + title + '</h1><div id="popup-body"><p>' + content + '</p></div></div>';
            }
            
            $(document).ready(function () { 
                
                var marker;
                var myOptions = {
                    center: new google.maps.LatLng(3.0083526, 101.808645899999999),
                    zoom: 8,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map_canvas"),
                myOptions);
                
                $('#search').click( function() {
                    var address = $("#addressToAdd").val();                    
                    if (address != undefined && address != null && address != "") {                        
                        geocoder = new google.maps.Geocoder();
                        geocoder.geocode( { 'address': address}, function(results, status) {                          
                            if (status == google.maps.GeocoderStatus.OK) {
                                map.setCenter(results[0].geometry.location);
                                map.setZoom(16);                                                      
                            }
                        });
                    }
                });
                
                $("#addMarker").click(function () {
                    var address = $("#addressToAdd").val();                    
                    if (address != undefined && address != null && address != "") {  
                        geocoder = new google.maps.Geocoder();
                        geocoder.geocode( { 'address': address}, function(results, status) {                          
                            if (status == google.maps.GeocoderStatus.OK) {                                  
                                marker = new google.maps.Marker({
                                    map: map,
                                    position: results[0].geometry.location
                                });
                                $('#mapLocation').val(results[0].geometry.location);
                            }
                        });
                    }
                });
                
                $("#save").click(function () {   
                    var idBuilding = $('#idBuilding').val();
                    var loc = $('#mapLocation').val();
                    var img = "<img src='http://maps.googleapis.com/maps/api/staticmap?center="
                                +loc+"&markers=color:blue|"
                                +loc+"&zoom=14&size=400x400&sensor=false' >;";                    
                            $('#mapBfrSave',opener.document).html('<label>&nbsp;</label>' + img);                             
                            
                            opener.document.form1.location.value = loc;
                            self.close();
                   
                });               
            <%--
                
            // create the map
            var map = $("#map_canvas").gmap3(
            {
                lat: 43.0566,
                lng: -89.4511,
                zoom: 12
            });

                // turn on mouse hover debug helper
                map.toggleDebug();

                // add markers by address
                //map.addMarkerByAddress("Madison, WI", "Madison", createInfo("Madison", "This point was added by geo-coding an address."));
                //map.addMarkerByAddress("312 Monte Cristo Circle, Verona, WI", "Home2", createInfo("Madison", "This point was added by geo-coding an address."));

                // add markers by lat / long
                //map.addMarkerByLatLng(43.0747, -89.3845, "State Capital", createInfo("State Capital", "This is the capital of the State of Wisconsin."));
                //map.addMarkerByLatLng(43.0849, -89.5349, "Work", createInfo("TomoTherapy", "This is where I work."));
                //map.addMarkerByLatLng(43.0068, -89.5376, "Home", createInfo("Home", "This is where I live."));

                // add click handlers
                map.onclickReverseGeocode($("#address"));
                map.onclickGetLatLng($("#latlng"));

                // add a path
                //map.addPath(path);

                // add polygons
                //map.addPolygon(poly1);
                //map.addClickablePolygon(poly2, createInfo("Housing District", "Look at all the houses"),
                //{
                //    fillColor: "#0000ff",
                //    strokeColor: "#0000ff"
                //});

                // set up the button
                $("#addMarker").click(function () {
                    var address = $("#addressToAdd").val();
                    if (address != undefined && address != null && address != "") {
                        $.fn.gmap3.geoCodeAddress(address, function (latlng) {
                            $.fn.gmap3.geoCodeLatLng(latlng.lat(), latlng.lng(), function(foundAddress){
                                var str = "latitude = " + latlng.lat() + "\nlongitude = " + latlng.lng() + "\naddress = " + foundAddress;
                                alert(str);
                                map.addMarkerByLatLng(latlng.lat(), latlng.lng(), address, createInfo(address, str.replace(/\n/gi, "<br />")));
                            });
                        });
                    }
                }); --%>               
                
                    });
        </script>

    </head>
    <body>
        <div id="wrapper">            
            <div id="content">

                <div>e
                    <fieldset class="aras1">
                        <legend>Searching</legend>
                        <p><label>Enter an address</label><input id="addressToAdd" type="text" value="" />
                            <input type="hidden" value="${idBuilding}" id="idBuilding"/></p>
                        <p><label>&nbsp;</label><input id="search" type="button" value="Search" class="btn"/>
                            <input id="addMarker" type="button" value="Add Marker" class="btn"/>
                            <input id="save" type="button" value="Save" class="btn"/>
                        </p>
                    </fieldset>

                </div>
                <div id="map_canvas" class="line"></div>
                <div id="latlng" class="line">&nbsp;</div>
                <div id="address" class="line">&nbsp;</div>
                <input type="hidden" id="mapLocation"/>

            </div>
        </div>
    </body>
</html>